<template>
	<div class="list">
		<p class="desc">你可以添加下列需要的功能，丰富宝店能力和体验</p>
		<ul class="list-con">
			<li class="list-item" @click="goOpen" v-for="i in 7">
				<div class="avatar">
					<img src="../../../../assets/images/abao/abao.png" width="100%" height="100%">
				</div>
				<div class="list-info">
					<h4 class="title">卡券功能</h4>
					<p class="desc">该功能向宝店提供卡券管理，推广，经营分析的整套解决方案</p>
				</div>
				<span class="already">已添加</span>
				<span class="el-icon-arrow-right icon"></span>
			</li>
		</ul>
	</div>
</template>
<script>
	export default{
		name : 'functionLsit',
		data(){
			return{

			}
		},
		methods:{
			goOpen(){
				this.$emit('open')
			}
		}
	}
</script>
<style lang="less" scoped>
	@fontColor:#666;
	.list{
		padding: 35px;
		.desc{
			color: @fontColor;
		}
		.list-con{
			overflow: hidden;
			margin-top: 25px;
			list-style: none;
			.list-item{
				float: left;
				position: relative;
				width: 430px;
				height: 90px;
				margin-bottom: 20px;
				margin-right: 10px;
				border: 1px solid #ccc;
				cursor: pointer;
				.avatar{
					position: absolute;
					top: -1px;
					left: -1px;
					width: 90px;
					height: 90px;
				}
				.list-info{
					width: 200px;
					margin-left: 110px;
					.title{
						line-height: 40px;
					}
					.desc{
						font-size: 14px;
					}
				}
				.already{
					display: inline-block;
					position: absolute;
					top: 50%;
					right: 50px;
					height: 22px;
					margin-top: -11px;
					font-weight: bold;
				}
				.icon{
					position: absolute;
					right: 15px;
					top: 50%;
					margin-top: -10px;
					display: inline-block;
					height:20px;
					width: 20px;
					line-height: 20px;
					text-align: center; 
				}
			}
		}
	}
</style>